<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://at.alicdn.com/t/font_263042_egsdo85chv.js"></script>
  </head>
  <style>
    .target {
      height: 120px;
      max-width: 200px;
      filter: url(#goo);
      text-align: center;
      position: relative;
      filter: url("#goo");
    }
    .share {
      display: block;
      width: 64px;
      line-height: 64px;
      background-color: #cd0000;
      color: #fff;
      border-radius: 50%;
      margin: auto;
      position: relative;
      z-index: 1;
    }
    [type="checkbox"] {
      position: absolute;
      clip: rect(0 0 0 0);
    }
    [class*="icon-share-"] {
      position: absolute;
      width: 48px;
      height: 48px;
      background-color: #cd0000;
      border-radius: 50%;
      transition: transform 0.5s;
      top: 8px;
      left: 0;
      right: 0;
      margin: auto;
      -ms-transform: scale(0.5);
      transform: scale(0.5);
    }
    [class*="icon-share-"] > .icon {
      display: block;
      width: 20px;
      height: 20px;
      margin: 14px auto;
    }
    :checked + .target .icon-share-weibo {
      transform: scale(1) translate(-70px, 60px);
    }
    :checked + .target .icon-share-wechat {
      transform: scale(1) translate(0, 75px);
    }
    :checked + .target .icon-share-qq {
      transform: scale(1) translate(70px, 60px);
    }
    :checked + .target .share {
      animation: jello 1s;
    }
    @keyframes jello {
      from,
      11.1%,
      to {
        transform: none;
      }
      22.2% {
        transform: skewX(-12.5deg) skewY(-12.5deg);
      }
      33.3% {
        transform: skewX(6.25deg) skewY(6.25deg);
      }
      44.4% {
        transform: skewX(-3.125deg) skewY(-3.125deg);
      }
      55.5% {
        transform: skewX(1.5625deg) skewY(1.5625deg);
      }
      66.6% {
        transform: skewX(-0.78125deg) skewY(-0.78125deg);
      }
      77.7% {
        transform: skewX(0.390625deg) skewY(0.390625deg);
      }
      88.8% {
        transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
      }
    }
  </style>
  <body>
    <svg width="0" height="0">
      <defs>
        <filter id="goo">
          <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
          <feColorMatrix
            in="blur"
            mode="matrix"
            values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9"
            result="goo"
          />
          <feComposite in="SourceGraphic" in2="goo" operator="atop" />
        </filter>
      </defs>
    </svg>
    <input type="checkbox" id="share" />
    <div class="target">
      <label class="share" for="share">分享</label>
      <span class="icon-share-weibo">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-weibo"></use>
        </svg>
      </span>
      <span class="icon-share-wechat">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-weixin"></use>
        </svg>
      </span>
      <span class="icon-share-qq">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-QQ"></use>
        </svg>
      </span>
    </div>
  </body>
</html>
